
<template>
    <div class="port-page">
      <router-link to="/home">
     <el-button type="info" class="add btn" style='margin-left: 5px; margin-top:20px;' @click="cancelf" icon="el-icon-caret-left">首页</el-button>
   </router-link>
        <div id="calendar">
        </div>
        <!-- <full-calendar class="test-fc" :events="fcEvents"
          first-day='1' :locale="zh"
          @changeMonth="changeMonth"
          @eventClick="eventClick"
          @dayClick="dayClick"
          @moreClick="moreClick">
            <template slot="fc-event-card" scope="p">
                <p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>
            </template>
        </full-calendar> -->
    </div>
</template>
<script>


    import { mapState } from 'vuex'
    import moment from 'moment';
    // import './zh-cn'
    export default {

      components : {

      },
        data () {
            return {

            }
        },
        created () {
            this.$store.dispatch('changeTitle','老师课表');//修改title
            this.$store.dispatch('changeRouterIndex','/educa/teacher');//修改路由
        },
        mounted () {
          $(function(){
            $('#calendar').fullCalendar({
        			header: {
        				// left: 'prevYear,prev,today,next,nextYear',
        				left: 'prev,next today',
        				center: 'title',
                right: 'month,agendaWeek,agendaDay'
        				// right: 'month,agendaWeek,agendaDay,listWeek'
        			},
        			defaultDate: '2017-11-12',
        			navLinks: true, // can click day/week names to navigate views
        			editable: true,
        			eventLimit: true, // allow "more" link when too many events
        			events: [
        				{
        					title: '13:10-14:10',
        					start: '2017-11-02T13:10:00',
                  end: '2017-11-02T14:10:00',
                  backgroundColor:"red",//背景颜色
                  borderColor:'#ccc',//边框颜色
        				},
        				{
        					title: 'Long Event',
        					start: '2017-11-07',
        					end: '2017-11-10'
        				},
        				{
        					id: 999,
        					title: '哈喽',
        					start: '2017-11-29T12:00'
        				},
        				{
        					id: 999,
        					title: 'Repeating Event',
        					start: '2017-11-16T16:00:00'
        				},
        				{
        					title: 'Conference',
        					start: '2017-11-11',
        					end: '2017-11-13'
        				},
        				{
        					title: 'Meeting',
        					start: '2017-11-12T10:30:00',
        					end: '2017-11-12T12:30:00'
        				},
        				{
        					title: 'Lunch',
        					start: '2017-11-12T12:00:00'
        				},
        				{
        					title: 'Meeting',
        					start: '2017-11-12T14:30:00'
        				},
        				{
        					title: 'Happy Hour',
        					start: '2017-11-12T17:30:00'
        				},
        				{
        					title: 'Dinner',
        					start: '2017-11-12T20:00:00'
        				},
        				{
        					title: 'Birthday Party',
        					start: '2017-11-13T07:00:00'
        				},
        				{
        					title: '跳转 Google',
        					url: 'http://google.com/',
        					start: '2017-11-28'
        				}
        			],
              //获取点击的时间
              dayClick : function(date, allDay, jsEvent, view) {
                  var selDate = date.format();// 获取当前点击日期
                  // $("#datetimepicker").val(selDate);
                  // $("#taskModal").modal();
                  // alert(selDate)
              },
        		});
          })
        },
        methods: {

        },
        computed: {
            ...mapState([
                'api'//域名
            ]),
            multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
/*div{color:red}*/
#calendar{
  margin-top: 10px;
}
.fc-grid .fc-day-number{padding: 0 2px; position:relative}
.fc-grid .fc-day-number span.solarday{float:right;color:#999}
.fc-grid .fc-day-number span.holiday{position:absolute; left:40%}
</style>
